Ext.onReady(function() {

			var fieldset = {
				xtype		: 'fieldset', // 1 
				title		: 'Name Information',
				flex		: 1,
				border		: false, // 2 
				labelWidth	: 60,
				defaultType	: 'field',
				defaults	: {
					anchor		: '-10',
					allowBlank	: false
				},
				items		: [{
							fieldLabel	: 'First',
							name		: 'firstName'
						}, {
							fieldLabel	: 'Middle',
							name		: 'middle'
						}, {
							fieldLabel	: 'Last',
							name		: 'firstName'
						}]
			}

			var fieldset2 = Ext.apply({}, { // 1 
				title	: 'Address Information',
				items	: [{
							fieldLabel	: 'Address',
							name		: 'address'
						}, {
							fieldLabel	: 'Street',
							name		: 'street'
						}, {
							xtype	: 'container', // 2 
							border	: false,
							layout	: 'column',
							anchor	: '100%',
							items	: [{
										xtype	: 'container', // 3 
										layout	: 'form',
										width	: 200,
										items	: [{
													xtype		: 'textfield', // 4 
													fieldLabel	: 'State',
													name		: 'state',
													anchor		: '-20'
												}]

									}, {
										xtype		: 'container', // 5 
										layout		: 'form',
										columnWidth	: 1,
										labelWidth	: 30,
										items		: [{
													xtype		: 'textfield', // 6 
													fieldLabel	: 'Zip',
													anchor		: '-10',
													name		: 'zip'

												}]
									}]
						}]
			}, fieldset);

			var fieldsetContainer = {
				xtype			: 'container',
				layout			: 'hbox',
				height			: 120,
				layoutConfig	: {
					align	: 'stretch'
				},
				items			: [fieldset, fieldset2]
			}

			var tabs = {
				xtype			: 'tabpanel',
				plain			: true,
				activeTab		: 0,
				height			: 180,
				deferredRender	: false,
				defaults		: {
					bodyStyle	: 'padding:10px'
				},
				items			: [{
							title		: 'Personal Details',
							layout		: 'form',
							defaults	: {
								width	: 230
							},
							defaultType	: 'textfield',

							items		: [{
										fieldLabel	: 'First Name',
										name		: 'first',
										allowBlank	: false,
										value		: 'Jack'
									}, {
										fieldLabel	: 'Last Name',
										name		: 'last',
										value		: 'Slocum'
									}, {
										fieldLabel	: 'Company',
										name		: 'company',
										value		: 'Ext JS'
									}, {
										fieldLabel	: 'Email',
										name		: 'email',
										vtype		: 'email'
									}]
						}, {
							title		: 'Phone Numbers',
							layout		: 'form',
							defaults	: {
								width	: 230
							},
							defaultType	: 'textfield',

							items		: [{
										fieldLabel	: 'Home',
										name		: 'home',
										value		: '(888) 555-1212'
									}, {
										fieldLabel	: 'Business',
										name		: 'business'
									}, {
										fieldLabel	: 'Mobile',
										name		: 'mobile'
									}, {
										fieldLabel	: 'Fax',
										name		: 'fax'
									}]
						}, {
							cls		: 'x-plain',
							title	: 'Biography',
							layout	: 'fit',
							items	: {
								xtype		: 'htmleditor',
								id			: 'bio2',
								fieldLabel	: 'Biography'
							}
						}]
			};

			var fp = new Ext.form.FormPanel({
						title			: 'complex form',
						frame			: true,
						layout			: 'vbox',
						height			: 350,
						layoutConfig	: {
							align	: 'stretch'
						},
						items			: [fieldsetContainer, tabs]
					});

			var win = new Ext.Window({
						title			: 'Patient Infotmation',
						width			: 800,
						modal			: true,
						border			: false,
						shadow			: false,
						autoHeight		: true,
						autoScroll		: true,
						closeAction		: 'hide',
						constrainHeader	: true,
						items			: [fp]
					});

			win.show();

		});